<template>
	<div class="container">
		<el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="180px" class="demo-ruleForm">
			<div style="display:inline-block;width:200px;height:100px;margin-left: 5px;" v-for="(item,index) in bankList">
				<img :src=" item.imgPath" alt="" style="width: 100%;height:100%;" @click="getbank(item,index)" :style="{'border':activeindex===index?'1px solid red':''}">
			</div>
			<el-form-item label="银行名称：">
			    <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width: 300px"></el-input>
			</el-form-item>
			<el-form-item label="电话：" >
			    <el-input placeholder="请输入内容" v-model="ruleForm.tel" style="width: 300px"></el-input>
			</el-form-item>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
			</el-form-item>
		</el-form>


	</div>

</template>

<script>
	import axios from "axios"
	export default{
		data(){
			return{
				activeindex:'',
				bankList:[],
				ruleForm:{},
				rules:{}
			}
		},
		mounted(){
			this.init()
		},
		methods:{
			init(){
				axios.get("http://grove.cpzsyun.com:81/api/control/loanInfo/bankInfo").then((res)=>{
					this.bankList = res.data
					for(let i=0;i<this.bankList.length;i++){
						this.bankList[i].imgPath = this.$store.state.plantImg + this.bankList[i].imgPath
					}
				})
			},
			getbank(item,index){
				this.ruleForm.pid = item.id
				this.activeindex = index
			},
			submitrule(){
				let data = this.ruleForm
				axios.post("http://grove.cpzsyun.com:81/api/control/bankInfo/save",data).then((res)=>{

				})
			}
		}
	}
</script>

<style scoped>

</style>
